<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入内容" id="inp">
    <img id="img" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    <img alt="这是一张图片" id="img2" src="01.png" alt="">
    <script>
        var inp = document.querySelector('#inp')
        var img = document.querySelector('#img')
        var img2 = document.querySelector('#img2')
        // 元素获取焦点
        inp.onfocus = function () {
            console.log('元素获取焦点');
        }
        // 元素失去焦点
        inp.onblur = function () {
            console.log('元素失去焦点');
        }
        // 监听资源是否加载完毕
        img.onload = function () {
            console.log('图片资源加载完毕');
        }
        // 监听资源加载出错
        img2.onerror = function () {
            console.log('资源加载出错了');
            this.src="https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-27/297f5edb1e984613083a2d3cc0c5bb36.png"
        }
    </script>
</body>

</html>